<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test: height:auto on two regions box with different widths</title>
    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
    <link rel="help" href="http://dev.w3.org/csswg/css3-regions/#rfcb-flow-fragment-height-resolution"/>
    <link rel="match" href="regions-auto-size-2-ref.xht"/>
    <meta name="flags" content=""/>
    <meta name="assert" content=
    "The height of a region with height:auto is computed from the fragment content. The first region only
    lays out the content until the first break. The second region lays out the reminder of the flow."/>
    <style>
    /*<![CDATA[*/
#article {
    -webkit-flow-into: article;
}

#article p:first-child {
    -webkit-region-break-after: always;
}

#regionA {
    -webkit-flow-from: article;
    width: 800px;
    height: auto;
    border: 1px solid #a0a0a0;
}

#regionB {
    -webkit-flow-from: article;
    width: 400px;
    height: auto;
    border: 1px solid #a0a0a0;
}

/*]]>*/
</style>
</head>
<body>
    <div id="article">
        <p>In first region</p>
        <p>In second region</p>
    </div>
    <p>You should see to gray boxes, one with the text 'In first region' and the other with 
        the text 'In second region'. The first box should be twice as wide as the second one.</p>
    <div id="regionA"></div>
    <div id="regionB"></div>
</body>
</html>